<!-- 商城 - 订单商品列表展示组件 -->
<template>
	<view class="vk-mall-order-goods-list" :style="{'padding':padding+'rpx','backgroundColor':bgColor}">
		<view class="list-item" v-for="(item,index) in listCom" :key="index">
			<u-image class="image" :src="item.image" mode="aspectFill" width="160" height="160" :fade="false"></u-image>
			<view class="goods-info">
				<view class="goods-name">
					<u-tag v-if="$getData(item, 'goodsInfo.type') === 1" text="卡券" type="error" size="mini" style="margin-right: 6rpx;" />
					<text>{{ item.goods_name }}</text>
					<text class="refund-tips" v-if="item.refund_amount">（已退{{item.refund_num}}）</text>
				</view>
				<view class="sku-name">规格：{{item.sku_name}} </view>

				<view class="exp-time"  v-if="$getData(item, 'goodsInfo.type') === 1">
					<text>{{ vk.myfn.goods.getValidityTimeStr(item.goodsInfo) }}</text>
				</view>

				<view v-if="item.real_price === undefined">-</view>
				<view class="goods-price-box" v-else-if="item.total_discount">
					<view class="goods-reality-price">¥{{ vk.pubfn.priceFilter(item.real_price) }}</view>
					<view class="goods-price">¥{{ vk.pubfn.priceFilter(item.total_amount/item.buy_num) }}</view>
					<!-- <view class="discount-desc"><u-tag :text="discountDescFn(item)" type="error" size="mini" mode="dark" shape="circle" /></view> -->
				</view>
				<view class="goods-price-box" v-else>
					<view class="goods-reality-price">¥{{ vk.pubfn.priceFilter(item.real_price) }}</view>
					<view class="goods-price" v-if="item.market_price">¥{{ vk.pubfn.priceFilter(item.market_price) }}</view>
				</view>
			</view>
			<view class="buy-num" v-if="mode === 1">x{{ item.send_num }}</view>
			<view class="buy-num" v-else-if="mode === 2">x{{ item.refund_num }}</view>
			<view class="buy-num" v-else-if="mode === 3">x{{ item.applyRefundNum }}</view>
			<view class="buy-num" v-else>x{{ item.buy_num }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-order-goods-list",
	props: {
		list:{
			Type:Array
		},
		padding:{
			Type:[String,Number],
			default: 0
		},
		bgColor:{
			Type:String
		},
		// 如设置大于0的值,代表先显示limit个商品,点击显示全部可显示全部商品
		limit:{
			Type:Number,
			default: 0
		},
		// 0 显示购买数量 1 显示已发货数量 2 显示已退款数量 3 显示申请退款的数量
		mode:{
			Type:Number,
			default: 0
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			data:{

			}
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		click(item){
			this.$emit("click",item)
		},
		discountDescFn(item){
			let str = "";
			let num = 0;
			if (item.vip_discount_amount) {
				num ++;
				str = "会员价"
			} else if (item.coupon_discount_amount) {
				num ++;
				str = "优惠券"
			} else if (item.business_discount_amount) {
				num ++;
				str = "商家优惠"
			}
			if (num > 1) {
				str = "综合优惠"
			}
			return str;
		}
	},
	// 监听器
	watch:{

	},
	// 计算属性
	computed: {
		listCom(){
			let goodsList = [];
			let { list=[], limit } = this;
			if (limit>0){
				for(let i=0; i<limit && i<list.length; i++){
					goodsList.push(list[i]);
				}
			} else {
				goodsList = list;
			}
			return goodsList;
		}
	}
};
</script>

<style lang="scss" scoped>
	.vk-mall-order-goods-list{
		.list-item{
			display: flex;
			margin-top: 20rpx;
			.image{
				width: 160rpx;
				height: 160rpx;
				display: block;
				border-radius: 20rpx;
				overflow: hidden;
			}
			.goods-info{
				margin-left: 20rpx;
				flex: 1;
				.goods-name{
					min-height: 50rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 28rpx;
					line-height: 1.2;
				}
				.refund-tips{
					color: var(--main);
				}
				.sku-name{
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #9a9a9a;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.exp-time{
					margin-top: 10rpx;
					color: #9a9a9a;
					font-size: 24rpx;
				}
			}
			.goods-price-box{
				display: flex;
				margin-top: 10rpx;
				align-items: center;
				.goods-price{
					margin-left: 10rpx;
					font-weight: 500;
					text-decoration: line-through;
					font-size: 24rpx;
				}
				.discount-desc{
					margin-left: 10rpx;
					font-weight: 500;
					font-size: 24rpx;
				}
				.goods-reality-price{
					font-weight: 500;
				}
			}
			.buy-num{
				margin-left: 10rpx;
				display: flex;
				align-items: center;
				margin-top: 4rpx;
				font-size: 30rpx;
				color: #9a9a9a;
			}
		}

		.list-item:first-child{
			margin-top: 0rpx;
		}
	}
</style>
